<template>
  <el-button type="text" class="xum-button" @click="click">
    <slot/>
  </el-button>
</template>

<script>
export default {
  name: 'XumButton',
  methods: {
    click () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>

  $buttonTime: .3s;

  .xum-button{
    padding: 10px 16px 8px;
    position: relative;
    color:  #333333;
    font-size: 16px;
    font-weight: 700;
    transition: $buttonTime;
    z-index: 1;
  }

  .xum-button:hover{
    color: white;
  }

  .xum-button::before{
    display: block;
    content: "";
    position: absolute;
    background: rgba($color: #333333, $alpha: 0.4);
    // min-width: 50%;
    width: 20px;
    height: 20px;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: $buttonTime;
  }

  .xum-button:hover::before{
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.9);
  }

</style>
